<script setup>
    import { onMounted } from 'vue'
    import { useRoute } from 'vue-router'
    import { sdCityList } from '@/utils/index'

    import ServiceMap from '../components/Service/ServiceMap.vue'
    import DataStatistics from '../components/Service/DataStatistics.vue'
    import SafetyPromotionVideo from '../components/Service/SafetyPromotionVideo.vue'
    import InfoPublish from '../components/Service/InfoPublish.vue'

    import PersonnelPresence from '../components/Service/PersonnelPresence.vue'
    import H5Page from '../components/Service/H5Page.vue'
    import MiniProgram from '../components/Service/MiniProgram.vue'
    import GovernmentWebsite from '../components/Service/GovernmentWebsite.vue'

    import putawayIcon from '../assets/images/service/putaway-icon.png'
    import unfoldIcon from '../assets/images/service/unfold-icon.png'

    const route = useRoute()


    let listData = $ref()

    let listLoading = $ref(false)

    // 当前列表点击的 index
    let currentIndex = $ref(4)

    onMounted(() => {
        // getCityTownTreeList().then(res => {
        //     listLoading = false
        //     listData = res.result[0].children
        // })
    })

    // 点击列表
    let serviceMap = $ref(null)
    const handleClick = (name, index) => {
        currenTownIndex = null
        currentIndex = index
        serviceMap.setMapCenterPoint(name)
    }

    // 是否只显示品牌驿站
    let showBrand = $ref(false)
    const handleClickCheckbox = () => {
        showBrand = !showBrand
        serviceMap.mapShowBrand(showBrand)
    }

    // 搜索驿站
    let keyword = $ref('')
    const searchPost = () => {
        serviceMap.setPostMapCenterPoint(keyword)
    }

    // 当前打开的tree index
    let currentTreeIndex = $ref(null)
    const handleClickTree = (index) => {
        if(index == currentTreeIndex) currentTreeIndex = null
        else currentTreeIndex = index
    }

    // 点击镇
    let currenTownIndex = $ref(null)
    const handleClickTown = (position, cindex, index) => {
        currenTownIndex = cindex
        currentIndex = index
        console.log(position)
        serviceMap.setPostMapCenterPoint(position, 'coordinates')
    }

</script>

<template>
    <div class="service-wrap content-main">
        <div class="card-box dark left-card" v-loading="listLoading">
            <card-title title="山东省地级市" class="zaozhuang" @click="searchPost"></card-title>

            <div class="list-wrap">
                <div class="list-item" :class="{ active: currentIndex == 0 }" @click="handleClick('山东省', 0)">山东省</div>
                <div class="list-item"
                    v-for="(item, index) in sdCityList"
                    :key="index"
                    :class="{ active: currentIndex == index+1 }"
                    @click="handleClick(item, index+1)"
                >   
                    <span>{{ item }}</span> 
                </div>

            </div>

            <div class="brand-wrap">
                <div class="border"></div>
                <div class="brand" @click="handleClickCheckbox" :class="{ active: showBrand }">
                    <img src="../assets/images/service/check.png" v-if="!showBrand">
                    <img src="../assets/images/service/checked.png" v-else>
                    品牌驿站
                </div>
    
            </div>

        </div>

        <div class="search-wrap flex-center">
            <input type="text" placeholder="请搜索驿站名" v-model="keyword">
            <img src="../assets/images/service/search.png" @click="searchPost">
        </div>


        <div class="right-card">
            <!-- 驿站公益点数据统计 -->
            <data-statistics></data-statistics>

            <!-- 安全宣传视频 -->
            <safety-promotion-video></safety-promotion-video>

            <!-- 信息发布 -->
            <info-publish></info-publish>
        </div>
        
    </div>

    <template v-if="route.path == '/service'">

        <!-- 人员风采 -->
        <personnel-presence></personnel-presence>
        
        <!-- 枣庄公益岗 h5 -->
        <h5-page></h5-page>

        <!-- 小程序 -->
        <mini-program></mini-program>

        <!-- 省厅官网 -->
        <government-website></government-website>
        
    </template>

    
    <service-map ref="serviceMap"></service-map>
    
    <div class="map-shadow map-shadow-top"></div>
    <div class="map-shadow map-shadow-bottom"></div>
    <div class="map-shadow map-shadow-left"></div>
    <div class="map-shadow map-shadow-right"></div>

</template>

<style scoped lang="scss">
    @import "../assets/css/common.scss";
    .service-wrap{
        .left-card{
            width: 273px;
            height: 870px;

            .zaozhuang{
                cursor: pointer;
            }
        }

        .right-card{
            width: 433px;
        }

        .list-wrap{
            padding-top: 20px;

            .list-item{
                padding: 10px 0px;
                padding-left: 40px;
                color: #fff;
                font-size: 18px;
                // font-weight: bold;
                cursor: pointer;

                &:first-child{
                    padding-left: 30px;
                }

                &:hover, &.active{
                    color: #00DCF6;
                }
            }
        }

        .brand-wrap{
            padding: 0 20px;
        }

        .border{
            margin-top: 20px;
            width: 100%;
            height: 1px;
            background: #fff;
        }

        .brand{
            cursor: pointer;
            font-size: 18px;
            padding-top: 30px;

            img{
                width: 24px;
                height: 24px;
                display: inline-block;
                margin-right: 10px;
                vertical-align: top;
                margin-top: -2px;
            }

            &.active{
                color: #00DCF6;
            }
        }


        .search-wrap{
            position: absolute;
            top: 116px;
            left: 330px;
            width: 275px;
            height: 44px;
            background: rgba(0,0,0,0.4);
            z-index: 8;
            border-radius: 22px;
            input{
                border: none;
                height: 40px;
                line-height: 40px;
                width: 200px;
                font-size: 16px;
                color: #fff;
            }

            input::-webkit-input-placeholder {  /* WebKit browsers*/ 
                color: #DCDCDC;
            }

            img{
                cursor: pointer;
            }
        }
    }

    .map-shadow-top{
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 1px;
        margin-top: -55px;
        box-shadow: 0px 40px 200px 80px #000000;
    }

    .map-shadow-bottom{
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 1px;
        margin-bottom: -5px;
        box-shadow: 0px 40px 200px 100px #000000;
    }
    .map-shadow-left{
        position: absolute;
        top: 0;
        left: 0;
        width: 1px;
        height: 100%;
        margin-left: -5px;
        box-shadow: 0px 40px 200px 140px #000000;
    }
    .map-shadow-right{
        position: absolute;
        bottom: 0;
        right: 0;
        width: 1px;
        height: 100%;
        margin-right: -5px;
        box-shadow: 0px 40px 200px 140px #000000;
    }
</style>